<template>
  <!-- 只能有一个div根标签 -->
  <!-- 精选题库的表单区域 -->
  <el-form
    size="small"
    class="box"
    ref="formData"
    label-width="80px"
    :model="formData"
  >
    <el-form-item class="father" label="学科">
      <el-select
        class="son"
        placeholder="请选择"
        @focus="getsubJectList"
        @change="changeSubjest"
        v-model="formData.subJect"
      >
        <el-option
          v-for="(item, index) in subjectList"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="father" label="二级目录">
      <el-select class="son" placeholder="请选择" v-model="formData.catalogue">
        <el-option
          v-for="(item, index) in catalogueList"
          :key="index"
          :label="item.directoryName"
          :value="item.directoryName"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="father" label="标签">
      <el-select class="son" placeholder="请选择" v-model="formData.label">
        <el-option
          v-for="(item, index) in labelList"
          :key="index"
          :label="item.tagName"
          :value="item.tagName"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="father" label="关键字">
      <el-input
        class="son"
        placeholder="根据题干搜索"
        v-model.trim="formData.keyword"
        @change="changeKeyWord"
      ></el-input>
    </el-form-item>
    <el-form-item class="father" label="试题类型">
      <el-select class="son" placeholder="请选择" v-model="formData.questions">
        <el-option
          v-for="(item, index) in questionsList"
          :key="index"
          :label="item"
          :value="index + 1"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="father" label="难度">
      <el-select class="son" placeholder="请选择" v-model="formData.difficulty">
        <el-option
          v-for="(item, index) in difficultyList"
          :key="index"
          :label="item"
          :value="index + 1"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="father" label="方向">
      <el-select class="son" placeholder="请选择" v-model="formData.direction">
        <el-option
          v-for="(item, index) in directionList"
          :key="index"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="father" label="录入人">
      <el-select
        class="son"
        placeholder="请选择"
        @focus="getentEredList"
        v-model="formData.entered"
      >
        <el-option
          v-for="(item, index) in enteredList"
          :key="index"
          :label="item.username"
          :value="item.username"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="father" label="题目备注">
      <el-input class="son" v-model.trim="formData.remarks"></el-input>
    </el-form-item>
    <el-form-item class="father" label="企业简称">
      <el-input class="son" v-model.trim="formData.abbreviation"> </el-input>
    </el-form-item>
    <el-form-item class="father" label="城市">
      <div class="son">
        <el-select
          placeholder="请选择"
          @change="changeArea"
          @focus="getProvincesList"
          v-model="formData.city"
          style="margin-right:5px"
        >
          <el-option
            v-for="(item, index) in provincesList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
        <el-select placeholder="请选择" v-model="formData.area">
          <el-option
            v-for="(item, index) in areaList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </div>
    </el-form-item>
    <el-form-item class="father">
      <div class="son">
        <el-button @click="resetForm">清除</el-button>
        <el-button type="primary" @click="onSearch">搜索</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import {
  subjectList,
  catalogueList,
  labelList,
  userList
} from '@/api/hmmm/choice'
// 导入所有的城市以及地区
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'inputPage',
  data () {
    return {
      formData: {
        subJect: '', // 学科
        catalogue: '', // 目录
        label: '', // 标签
        keyword: '', // 关键字
        questions: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        entered: '', // 录入人
        remarks: '', // 备注
        abbreviation: '', // 简称
        city: '', // 城市
        area: '' // 地区
      },
      subjectList: [], // 学科列表
      catalogueList: [], // 二级目录列表
      labelList: [], // 标签列表
      questionsList: ['单选', '多选', '简答'], // 试题类型列表
      difficultyList: ['简单', '一般', '困难'], // 难度列表
      directionList: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ], // 方向列表
      enteredList: [], // 录入人列表
      provincesList: [], // 所有城市列表
      areaList: [], // 所有地区列表
      subjectID: null // 学科id 用来搜索数据
    }
  },
  created () {},
  mounted () {},
  components: {},
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 学科表单点击触发，获取所有学科数据
    async getsubJectList () {
      try {
        const { data } = await subjectList()
        this.subjectList = data
        console.log(this.subjectList)
      } catch (err) {
        this.$message(err)
      }
    },
    // 当学科表单里面有数据时候触发，用来获取目录列表数据和标签列表数据
    async changeSubjest () {
      // 清空目录列表和标签列表的内容
      this.formData.catalogue = ''
      this.formData.label = ''
      try {
        // 发送请求获取目录列表数据
        const { data } = await catalogueList({
          subjectID: this.formData.subJect
        })
        // 发送请求获取标签列表数据
        this.catalogueList = data.items
        const result = await labelList({
          subjectID: this.formData.subJect
        })
        this.labelList = result.data.items
        // 把学科id传给父组件
        const id = this.formData.subJect || null
        const keyword = this.formData.keyword || null
        this.$emit('getsubjectID', id, keyword)
      } catch (err) {
        this.$message(err)
      }
    },
    // 点击录入人表单触发，获取用户列表数据
    async getentEredList () {
      try {
        const { data } = await userList({ keyword: this.formData.keyword })
        this.enteredList = data
      } catch (err) {
        this.$message(err)
      }
    },
    // 点击城市表单触发，获取城市列表数据
    getProvincesList () {
      this.provincesList = provinces()
    },
    // 当城市表单里面有内容时触发，用来获取地区列表数据
    changeArea () {
      // 清空地区列表
      this.formData.area = ''
      this.areaList = citys(this.formData.city)
    },
    // 清除功能
    resetForm () {
      this.formData = {
        subJect: '', // 学科
        catalogue: '', // 目录
        label: '', // 标签
        keyword: '', // 关键字
        questions: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        entered: '', // 录入人
        remarks: '', // 备注
        abbreviation: '', // 简称
        city: '', // 城市
        area: '' // 地区
      }
      this.catalogueList = []
      this.labelList = []
      // 把学科id传给父组件
      const id = this.formData.subJect || null
      const keyword = this.formData.keyword || null
      this.$emit('getsubjectID', id, keyword)
    },
    // 关键字表单失去光标触发
    changeKeyWord () {
      // 把学科id传给父组件
      const id = this.formData.subJect || null
      const keyword = this.formData.keyword || null
      this.$emit('getsubjectID', id, keyword)
    },
    // 搜索功能
    onSearch () {
      // 根据学科id来获取相应的数据
      this.$emit('getAllsubjectList', this.data)
    }
  }
}
</script>

<style scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.father {
  width: 25%;
}
.son {
  display: flex;
  justify-content: end;
  width: 100%;
}
</style>
